<template id="order_details">
	<div class="order_details">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link to="/doudle_routing"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

				<p>订单详情</p>
				<div class="about_select">
					<div class="about_ing"></div>
				</div>

			</div>
		</div>
		<!--头部结束-->

		<!--订单详情-->
		<div class="order_success">
			<div class="order_cash"><img src="../../assets/images/order_details/order.png" />
			<span>
					{{detail.booking_status==0 ? '订单正在初始化' : ''}}
					{{detail.booking_status==1 ? '会员下单，等待教练接单' : ''}}
				  {{detail.booking_status==2 ? '教练确认接单，等待开始工作' : ''}}
					{{detail.booking_status==3 ? '正在工作中' : ''}}
					{{detail.booking_status==4 ? '工作完成，等待评价' : ''}}
					{{detail.booking_status==5 ? '评价完成' : ''}}
					{{detail.booking_status==6 ? '预约取消' : ''}}
				
				</span>
			</div>
		</div>
		<!--订单详情结束-->
		<div class="order_self">
			<p>感谢您在蜗牛瑜伽预约下单,欢迎您再次预约!</p>
		</div>

		<div class="doudle_main">

			<div class="doudle_main_top">
				<img src="../../assets/images/my_order/my_order_15.png" />
			</div>
			<div class="doudle_main_dl">
				<div class="doudle_dl">

					<dl>

							<dt><img src="../../assets/images/class/about_coach.png"/></dt>
							<dd>
								<p>教练姓名：{{detail.coach_name}}</p>
								<p>预约课程：{{detail.class_name}}</p>
								<p>预约时间:{{detail.booking_date | formatDate}}</p>
							</dd>

					</dl>
				</div>
			</div>

			<div class="doudle_money">
				<div class="doudle_neth">
					<img src="../../assets/images/order_details/lianxi.png"/>
					<font>联系客服</font>
				</div>
			</div>





		</div>


         <div class="order_join">
         	<ul>
         		<li>
         			<div class="order_text">
         				<p>订单编号：{{detail.booking_id}}</p>
         				<p>下单时间：{{detail.create_time | formatDate}}</p>
         			</div>
         		</li>
         		<li>
         			<div class="order_text">
         				<p>预约课程:{{detail.class_name}}</p>
         				<p>课程时长：{{detail.duration}}分钟</p>
         			</div>
         		</li>
         			<li>
         			<div class="order_text">
         				<p>支付方式:
                  {{detail.pay_type==1 ? '余额' : ''}}
                  {{detail.pay_type==2 ? '微信' : ''}}
                  {{detail.pay_type==3 ? '支付宝' : ''}}
                  {{detail.pay_type==4 ? '现金加卡券' : ''}}
                  {{detail.pay_type==5 ? '卡券' : ''}}
                  支付</p>
         				<p>支付时间：{{detail.place_order_time | formatDate}}</p>
         			</div>
         		</li>
         		<li>
         			<div class="order_text">
         				<p>{{detail.coach_name}}<span>{{detail.coach_phone}}</span></p>
         				<p>地址:{{detail.address}}</p>
         			</div>
         		</li>
         		<li>
         			<div class="order_text">
         				<div class="order_text_top">
         					<p>课程总额</p>
         					<span>￥{{detail.price}}</span>
         				</div>
         				<div class="order_text_bottom">
         					<p>抵扣金额</p>
         					<span>-￥{{detail.card_discount}}</span>
         				</div>

         			</div>
         		</li>
         		<li>
         			<div class="order_text">
         				<span>实付款</span>
         				<font>￥{{detail.cash_price}}</font>

         			</div>
         		</li>
         	</ul>
         </div>

         <!--删除订单-->
          <div class="order_del">
          	<div class="order_remove">
          		<p>删除订单</p>
          	</div>
          	<div class="order_btn">
          		<button><router-link :to="{path:'/appointment_coach',query:{coachid:detail.coach_id}}">再次预约</router-link></button>
          	</div>
          </div>

          <!--删除订单结束-->

	</div>
</template>

<script>
  export default {
    data() {
      return {
        detail:[
          {
            coach_name:'',//教练姓名
            class_name:'',//预约课程
            booking_date:'',//预约时间
            booking_id:'',//订单编号
            create_time:'', //下单时间
            place_order_time:'',//支付时间
            duration:'',//课程时长
            pay_type:'',//支付方式
            coach_phone:'',//手机号
            address:'',//地址
            price:'',//课程总额
            card_discount:'',//抵扣金额
            cash_price:'' //实付款
          }
        ],
        bookingid:'',
      }
    },
    created(){
     
      let routerParams = this.$route.query.bookingid
        // 将数据放在当前组件的数据内
        this.bookingid = routerParams
         let obj = {
        //请求的参数
      bookingid:this.$route.query.bookingid,
      };
      let _this = this
      let qs = require('qs');
      this.$axios.post("http://yogahome.top/yujia/user/findOrderDetails", qs.stringify(obj), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((response) => {
//      console.log(response.data)
        _this.detail = response.data.data
        
      }).catch(function(error) {
        console.log(error);
      });
    },
    //		将时间戳转换成日期格式
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      },
    },
    methods:{

    }
  }
</script>

<style scoped>
	@import "../../assets/css/order_details.css";
</style>
